<!--
* @author wn
* @date 2022/05/25 15:29:27
* @description: 图片右侧 名字组件
!-->
<template>
	<p class="g-name">{{ goods.name }}</p>
	<p class="g-desc">{{ goods.desc }}</p>
	<p class="g-price">
		<!-- &yen; -->
		<span>{{ goods.price }}</span>
		<span>{{ goods.oldPrice }}</span>
	</p>
	<div class="g-service">
		<dl>
			<dt>促销</dt>
			<dd>12月好物放送，App领券购买直降120元</dd>
		</dl>
		<dl>
			<dt>配送</dt>
			<dd>至 <xtx-city :fullLocation="fullLocation" @change="changeCity" /></dd>
		</dl>
		<dl>
			<dt>服务</dt>
			<dd>
				<span>无忧退货</span>
				<span>快速退款</span>
				<span>免费包邮</span>
				<a href="javascript:;">了解详情</a>
			</dd>
		</dl>
	</div>
</template>
<script>
import { reactive, toRef } from 'vue'
export default {
	name: 'GoodsName',
	props: {
		goods: {
			type: Object,
			default: () => ({}),
		},
	},
	setup(props) {
		// 提供给后台的数据 没有登陆
		const address = reactive({
			provinceCode: '110000',
			cityCode: '119900',
			countyCode: '110101',
			fullLocation: '北京市 市辖区 东城区',
		})
		// 取出默认地址  给 address 赋值  已登录
		if (props.goods.userAddress) {
			const defaultAddress = props.goods.userAddress.find(
				item => item.isDefault === 1
			)
			if (defaultAddress) {
				address.provinceCode = defaultAddress.provinceCode
				address.cityCode = defaultAddress.cityCode
				address.countyCode = defaultAddress.countyCode
				address.fullLocation = defaultAddress.fullLocation
			}
		}
		const fullLocation = toRef(address, 'fullLocation')
		// 城市选中处理函数
		const changeCity = result => {
			address.provinceCode = result.provinceCode
			address.cityCode = result.cityCode
			address.countyCode = result.countyCode
			address.fullLocation = result.fullLocation
		}
		return { fullLocation, changeCity }
	},
}
</script>
<style scoped lang="less">
.g-name {
	font-size: 22px;
}
.g-desc {
	color: #999;
	margin-top: 10px;
}
.g-price {
	margin-top: 10px;
	span {
		&::before {
			content: '¥';
			font-size: 14px;
		}
		&:first-child {
			color: @priceColor;
			margin-right: 10px;
			font-size: 22px;
		}
		&:last-child {
			color: #999;
			text-decoration: line-through;
			font-size: 16px;
		}
	}
}
.g-service {
	background: #f5f5f5;
	width: 500px;
	padding: 20px 10px 0 10px;
	margin-top: 10px;
	dl {
		display: flex;
		align-items: center;
		padding-bottom: 21px;
		dt {
			width: 50px;
			color: #999;
		}
		dd {
			color: #666;
			&:last-child {
				span {
					margin-right: 10px;
					&::before {
						content: '•';
						color: @xtxColor;
						margin-right: 2px;
					}
				}
				a {
					color: @xtxColor;
				}
			}
		}
	}
}
</style>
